{extend name='public/window' /}

{block name="content"}
<style type="text/css">
    .laydate_table {
        display: none;
    }

    #laydate_hms {
        display: none !important;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form">
                <div class="tianxie">
                    <input type="hidden" name="__token__" id="token" value="{:token()}"/>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">月份</label>
                            <div class="layui-input-inline">
                                <input type="text" id="start_time" name="start_time" class="layui-input"
                                       placeholder="选择月份">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item merch">
                        <label class="layui-form-label">费用</label>
                        <div class="layui-input-inline">
                            <select name="type" lay-search="" id="type" lay-filter="type">
                                <option value="1">费率电价</option>
                                <option value="2">单一电价</option>
                            </select>
                        </div>
                    </div>
                    <div class="feilv">
                        <div class="layui-form-item">
                            <label class="layui-form-label">峰电价 *</label>
                            <div class="layui-input-block">
                                <input type="number" name="fmoney" autocomplete="off"
                                       placeholder="请输入单价" class="layui-input" value="{$money['fmoney']}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">谷电价 *</label>
                            <div class="layui-input-block">
                                <input type="number" name="gmoney" autocomplete="off"
                                       placeholder="请输入单价" class="layui-input" value="{$money['gmoney']}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">平电价 *</label>
                            <div class="layui-input-block">
                                <input type="number" name="pmoney" autocomplete="off"
                                       placeholder="请输入单价" class="layui-input" value="{$money['pmoney']}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">分摊电价 *</label>
                            <div class="layui-input-inline">
<!--                                <select  name="tmoney"  id="tmoney">-->
<!--                                    <option value="">请选择</option>-->
<!--                                    <option value="{$money['tmoney']}">写字楼分摊-{$money['tmoney']}</option>-->
<!--                                    <option value="{$money['stmoney']}">商场分摊-{$money['stmoney']}</option>-->
<!--                                </select>-->
                                <input type="number" name="tmoney" autocomplete="off"
                                       placeholder="请输入单价" class="layui-input" value="{$money['tmoney']}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item danyi" style="display: none">
                        <label class="layui-form-label">单价 *</label>
                        <div class="layui-input-block">
                            <input type="number" name="price" autocomplete="off" placeholder="请输入单价"
                                   class="layui-input" value="{$money['linmoney']}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">增幅比例 *</label>
                        <div class="layui-input-block">
                            <input type="number" name="add_price" autocomplete="off" placeholder="请输入增幅比例"
                                   value="0" class="layui-input">
                        </div>
                    </div>
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label">商户类型* </label>-->
<!--                        <div class="layui-input-block" >-->
<!--                            <select name="merchant_type"   id="merchant_type">-->
<!--                                <option value="">请选择</option>-->
<!--                                <option value="1">写字楼</option>-->
<!--                                <option value="2">商场零售</option>-->
<!--                                <option value="3">商场非零</option>-->
<!--                            </select>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
                <div class="" id="my-table" style="display: none">
                    <div style="margin: 20px 0">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="text-align: left;width: auto">商户：</label>
                        <div class="layui-input-inline">
                            <select name="merchant_id"  id="merchant_id" lay-search="">
                                <option value="" ></option>
                                {volist name="merchant_list" id="t"}
                                {if empty($t.name)||$t.name=='-'}
                                <option value="{$t.id}" >{$t.company} - {$t.code}-{$t.biz_state}-{$t.positions_code}</option>
                                {else/}
                                <option value="{$t.id}" >{$t.name} - {$t.code}-{$t.biz_state}-{$t.positions_code}</option>
                                {/if}
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="text-align: left;width: auto">业态：</label>
                        <div class="layui-input-inline">
                            <select name="activities"  lay-filter="activities" id="activities">
                                <option value="">请选择</option>
                                {volist name="activities" id="v1"}
                                <option value="{$v1.name}">{$v1.name}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="text-align: left;width: auto">楼层：</label>
                        <div class="layui-input-inline">
                            <select name="lcName"  lay-filter="lcName" id="lcName">
                                <option value="">请选择</option>
                                {volist name="lcName" id="v1"}
                                <option value="{$v1.lcName}">{$v1.lcName}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-btn icon-btn layui-btn-sm" id="student">
                            <i class="layui-icon"></i>搜索
                        </div>
                        <button type="reset" class="layui-btn icon-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-refresh"></i>{:__('Reset')}</button>
                    </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">全部生成</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="all" lay-skin="primary">
                        </div>
                    </div>
                    <table class="layui-hide" id="student_table" lay-filter="student_table"></table>
                </div>
                <div class="layui-btn blue_theme next" style="float: right">下一步</div>
                <div class="chuang" style="float: right;display: none">
                    <div class="layui-btn blue_theme">上一步</div>
                    <button class="layui-btn"  lay-submit="" lay-filter="add">确认创建</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/html" id="operationTpl">
    <a href="javascript:;" class="layui-btn  layui-btn-danger layui-btn-xs" data-title="删除" lay-event="del"><i
            class="layui-icon "></i></a>
</script>
<script>
    layui.use(['element', 'form', 'table', 'jquery', 'lucky', 'laydate', 'xmSelect'], function () {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.jquery;
        var lucky = layui.lucky;
        var id_lists = [];
        laydate.render({
            elem: '#start_time',
            type: 'month',
            format: 'yyyy-MM',
            trigger: 'click',
            value: doHandleDate(),
            max: doHandleDate(), //最大月
        });
        form.on('select(type)', function (data) {
            var type = data.value;
            if (type == 2) {
                $(".feilv").css('display', 'none');
                $(".danyi").css('display', 'block');
            } else {
                $(".feilv").css('display', 'block');
                $(".danyi").css('display', 'none');
            }
        });
        var costType = [];
        var student_table = table.render({
            id: 'student_table',
            elem: '#student_table',
            page: true, //开启分页
            limit: 10,
            limits: [10, 20, 30],
            title: '标题',
            cols: [[
                {title: '', type: 'checkbox', fixed: true},
                // {title: 'id', field: 'id', width: 60},
                {title: '商户编号', field: 'merchant_sn'},
                {title: '公司名称', field: 'company',tempalte:function (item){
                        return item.company
                    }},
                {title: '品牌', field: 'name',tempalte:function (item){
                        return item.name
                    }},
                {title: '电表编号', field: 'pointId'},
                {title: '实际用量', field: 'electricity'},
                {title: '合计(元)', field: 'money'},
                {title: '账期', field: 'month'},
            ]], data: costType,
            done: function(res, curr, count){
                var data = res.data;
                let arr = res.data
                for (let i = 0, l = data.length; i < l; i++) {
                    if (id_lists.indexOf(arr[i]['id']) === -1) {
                        id_lists.push(arr[i]['id'])
                    }
                }
                //id_checkeds=[];
            },
        });
        var id_checkeds=[];
        table.on('checkbox(student_table)', function(obj){
            //商户id
            var is_all          = obj.type == 'all' ? true : false;//是否全选
            var is_checked      = obj.checked;//是否选中
            if(is_all)//全选
            {
                if(is_checked) id_checkeds = id_lists;
                if(!is_checked) id_checkeds = [];
            }
            if(!is_all)//单选的时候  push或pop
            {
                var this_PKID = obj.data.id;
                if(!is_checked)
                {
                    id_checkeds.splice($.inArray(this_PKID, id_checkeds), 1);
                }
                if(is_checked)
                {
                    var index = $.inArray(this_PKID, id_checkeds);
                    if(index == -1)
                    {
                        id_checkeds.push(this_PKID);
                    }
                }
            }
        });
        form.on('submit(add)', function (data) {
            data.field.merchant_id =id_checkeds;
            console.log(data.field.merchant_id)

            lucky.FormSubmit("{:url('add')}", data.field, true);
            return false;
        });
        /**
         * 关键词搜索树
         */
        $('#student').click(function (){
                var type = $('#type').val();
                var time = $("#start_time").val();
                var fmoney = $("input[name='fmoney']").val();
                var gmoney = $("input[name='gmoney']").val();
                var pmoney = $("input[name='pmoney']").val();
                // var tmoney = $("select[name='tmoney']").val();
                var tmoney = $("input[name='tmoney']").val();
                var add_price = $("input[name='add_price']").val();
                var price = $("input[name='price']").val();
                var merchant = $("#merchant_id").val();
                var activities = $("#activities").val();
                var lcName = $("#lcName").val();
                var data;
                data = {
                    month: time,
                    type: type,
                    fmoney: fmoney,
                    gmoney: gmoney,
                    pmoney: pmoney,
                    tmoney: tmoney,
                    add_price: add_price,
                    price: price,
                    merchant_id:merchant,
                    activities:activities,
                    lcName:lcName,
                    // merchant_type:merchant_type,
                    page:1,
                    limit:100000
                }
                costtype(data);
        });
        /**
         * 下一步切换
         * @returns {string}
         */
        $(".next").click(function () {
            var type = $('#type').val();
            var time = $("#start_time").val();
            var fmoney = $("input[name='fmoney']").val();
            var gmoney = $("input[name='gmoney']").val();
            var pmoney = $("input[name='pmoney']").val();
            // var tmoney = $("select[name='tmoney']").val();
            var tmoney = $("input[name='tmoney']").val();
            var activities = $("#activities").val();
            var add_price = $("input[name='add_price']").val();
            var price = $("input[name='price']").val();
            var merchant_type = $("#merchant_type").val();
            var lcName = $("#lcName").val();
            var data;
            if (type == 1) {
                if (fmoney == '' || gmoney == '' || pmoney == '') {
                    layer.msg('请输入值');
                    return false;
                }
                // if (merchant_type=='') {
                //     layer.msg('请选择类型');
                //     return false;
                // }
                data = {
                    month: time,
                    type: type,
                    fmoney: fmoney,
                    gmoney: gmoney,
                    pmoney: pmoney,
                    tmoney: tmoney,
                    add_price: add_price,
                    price: price,
                    activities: activities,
                    lcName:lcName,
                    // merchant_type:merchant_type,
                    page:1,
                    limit:100000
                }
            } else {
                if (price == '') {
                    layer.msg('请输入单价');
                    return false;
                }
                data = {
                    month: time,
                    type: type,
                    price: price,
                    page:1,
                    limit:100000
                }
            }
            $(".chuang").show();
            $(".next").hide();
            $(".feilv").hide();
            $(".tianxie").hide();
            $('#my-table').show()
            costtype(data);
            // $.ajax({
            //     type:"get",
            //     url:"{:url('admin/ElectricityBill/getList')}",   //数据传输的控制器方法
            //     data: data,
            //     success:function(data){
            //         if(data.data.length==0){
            //             layer.msg('暂无数据');
            //         }
            //
            //         console.log(data);
            //     }
            // });
        });


        /**
         * 表格赋值
         */
        function costtype(datas) {
            $.ajax({
                url: "{:url('admin/ElectricityBill/getList')}",
                type: "get",
                data: datas,
                dataType: "json",
                success: function (data) {
                    if(data.code==1){
                        layer.msg(data.msg);

                    }
                    id_checkeds=[];
                    var param = data.data
                    student_table.reload({data: param});
                }
            });
        }

        $(".chuang").click(function () {
            var type = $('#type').val();
            $(".next").show();
            $(".chuang").hide();
            $(".tianxie").show();
            $("#my-table").hide();
            if (type == 1) {
                $(".feilv").show();
                $('.danyi').hide()
            } else {
                $(".danyi").show();
                $('.feilv').hide()
            }
        });

        ///获取年月
        function doHandleDate() {
            var myDate = new Date();
            var tYear = myDate.getFullYear();
            var tMonth = myDate.getMonth();

            var m = tMonth;
            if (m.toString().length == 1) {
                m = "0" + m;
            }
            return tYear + '-' + m;
        }
    })

</script>

{/block}

